<template>
	<view class="container">
		<form @submit="formSubmit" class="formInfo" :class="isCDepPerSon ? 'tl-show': '' || isDutyObject ? 'tl-show': '' || isTaskType ? 'tl-show': '' || isTargetType ? 'tl-show': '' || isDutyType ? 'tl-show': ''">
			<view class="missionName">
				<text>*</text><text class="missName">任务名称:</text><input type="text" maxlength="20"
					v-model="name" /><text>{{name.length}}/20</text>
			</view>
			<view class="missionType"><text>*</text>
				<view class="missionType_o">任务类型:</view>
				<view class="missionType_t" @click="toMissionType">{{taskTypeText}}
					<image src="/static/image/sanjiaoxing-l@2x.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="objectType">
				<view class="objectType_o">对象类型:</view>
				<view class="objectType_t" @click="toObjectType">{{targetTypeText}}
					<image src="/static/image/sanjiaoxing-l@2x.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="dutyObjectType"><text>*</text>
				<view class="dutyObjectType_o">责任对象类型:</view>
				<view class="dutyObjectType_t" @click="toDutyType">{{dutyObjectTypeText}}
					<image src="/static/image/sanjiaoxing-l@2x.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="dutyObject"><text>*</text>
				<view class="dutyObject_o">责任对象:</view>
				<view class="dutyObject_t" @click="toDutyObject">{{dutyObjectText}}
					<image src="/static/image/sanjiaoxing-l@2x.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="missionAddress">
				<text>*</text><text class="missAddress">任务地点:</text><input type="text" maxlength="50"
					v-model="taskAddress" /><text>{{taskAddress.length}}/50</text>
			</view>
			<view class="missionTime">
				<text class="missTime">任务时间:</text>
				<view class="example-body">
					<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至"
						class="dataPicker" />
				</view>
			</view>
			<view class="missionContent">
				<text class="missionContentName">任务内容</text><text
					class="missionContentLength">({{content.length}}/2000)</text>
				<textarea placeholder="请输入内容..." maxlength="2000" v-model="content"></textarea>
			</view>
			<view class="missionRemark">
				<text>备注:</text>
				<textarea v-model="remark" maxlength="300"></textarea>
			</view>
			<button form-type="submit">提 交</button>
			<view class="footer_top"></view>
		</form>
		<!-- 任务类型 -->
		<view class="allMissionStyle" :class="{'share-show':isTaskType}">
			<text>请选择</text>
			<scroll-view scroll-y="true" class="missionStyle">
				<view v-for="(item,index) in taskTypes" :key="index" @click="getTaskType(item)">
					{{item.data.dataName}}
				</view>
			</scroll-view>
		</view>
		<!-- 对象类型 -->
		<view class="allMissionStyle" :class="{'share-show':isTargetType}">
			<text>请选择</text>
			<scroll-view scroll-y="true" class="missionStyle">
				<view v-for="(item,index) in targetTypes" :key="index" @click="getTargetType(item)">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<!-- 责任对象类型 -->
		<view class="allMissionStyle" :class="{'share-show':isDutyType}">
			<text>请选择</text>
			<scroll-view scroll-y="true" class="missionStyle">
				<view v-for="(item,index) in dutyObjectTypes" :key="index" @click="getDutyType(item)">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<!-- 责任对象——到部门 -->
		<view class="allMissionStyle" :class="{'share-show':isDutyObject}">
			<text>请选择</text>
			<scroll-view scroll-y="true" class="missionStyle">
				<view class="" @click="getDutyObjectDep()">
					{{dutyObjectDep.nodeName}}
				</view>
				<view class="" v-for="(item,index) in dutyObjectUser" :key="index" @click="getDutyObjectUser(item)">
					{{item.nodeName}}
				</view>
			</scroll-view>
		</view>
		<!-- 责任对象——到人-->
		<view class="allMissionPerson" :class="{'share-show':isCDepPerSon}">
			<view class="personChoose"><text class="Cancels" @click="Cancels()">取消</text><text class="Choose">请选择</text>
			</view>
			<scroll-view scroll-y="true" class="missionPerson">
				<view class="" v-for="(item,index) in CurrentDepPerSon" :key="index" @click="getCurrentDepPerSon(item)">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<!-- 遮罩层 -->
		<view class="mask" @click="masking()" v-show="isMask"></view>
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				title: '新增任务',
				name: '',
				taskType: '',
				taskTypeText: '请选择...',
				targetType: '',
				targetTypeText: '请选择...',
				dutyObjectType: '',
				dutyObjectTypeText: '请选择...',
				dutyObject: '',
				dutyObjectText: '请选择...',
				taskAddress: '',
				taskStartTime: '',
				taskEndTime: '',
				content: '',
				remark: '',
				taskTypes: [],
				targetTypes: [],
				dutyObjectTypes: [],
				dutyObjectDep: [],
				dutyObjectUser: [],
				order: null,
				index: null,
				num: null,
				datetimerange: [],
				isMask: false,
				isTaskType: false,
				isTargetType: false,
				isDutyType: false,
				isDutyObject: false,
				currentDepId: '',
				CurrentDepPerSon: [],
				isCDepPerSon: false,
				dutyObjectDepAndPerSon: ''
			}
		},
		watch: {
			datetimerange(newval) {
				this.taskStartTime = this.datetimerange[0];
				this.taskEndTime = this.datetimerange[1];
			}
		},
		onLoad() {
			this.getTaskTypeList();
			this.getTargetTypeList();
			this.getDutyTypeList();
			this.getDutyObjectList();
		},
		methods: {
			async formSubmit() {
				if (this.name == '') {
					uni.showLoading({
						title: '任务名不能为空!',
						icon: 'none'
					});
					setTimeout(function() {
						uni.hideLoading();
					}, 2000)
				} else if (this.taskType == '') {
					uni.showLoading({
						title: '任务类型不能为空!',
						icon: 'none'
					});
					setTimeout(function() {
						uni.hideLoading();
					}, 2000)
				} else if (this.dutyObjectType == '') {
					uni.showLoading({
						title: '责任对象类型不能为空!',
						icon: 'none'
					});
					setTimeout(function() {
						uni.hideLoading();
					}, 2000)
				} else if (this.dutyObject == '') {
					uni.showLoading({
						title: '责任对象不能为空!',
						icon: 'none'
					});
					setTimeout(function() {
						uni.hideLoading();
					}, 2000)
				} else if (this.taskAddress == '') {
					uni.showLoading({
						title: '任务地点不能为空!',
						icon: 'none'
					});
					setTimeout(function() {
						uni.hideLoading();
					}, 2000)
				} else {
					const res = await this
						.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
							url: '/api-operate/order-task/save',
							method: "post",
							data: {
								name: this.name,
								taskType: this.taskType,
								targetType: this.targetType,
								dutyObjectType: this.dutyObjectType,
								dutyObject: this.dutyObject,
								taskAddress: this.taskAddress,
								taskStartTime: this.taskStartTime,
								taskEndTime: this.taskEndTime,
								content: this.content,
								remark: this.remark
							}
						})
					if (res.success == true) {
						uni.showLoading({
							title: '提交成功',
							image: '/static/image/correct.png'
						})
						setTimeout(function() {
							uni.hideLoading();
							uni.navigateBack({
							    url: '/pages/workOrder/index'
							});
						}, 2000);
					} else {
						uni.showLoading({
							title: '提交失败',
							image: '/static/image/mistakes.png'
						})
						setTimeout(function() {
							uni.hideLoading();
						}, 2000);
					}
				}
			},
			// -------------------------------------------------
			//获取任务类型
			async getTaskTypeList() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-mobile/main/getDicTaskType',
						method: "get",
					})
				// console.log(res.body.orderTask.data);
				if (res.success == true) {
					this.taskTypes = res.body.data;
				}
			},
			// -----------------------------------------------------------------
			//获取对象类型
			async getTargetTypeList() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-mobile/main/getDicTargetsTypes',
						method: "get",
					})
				if (res.success == true) {
					this.targetTypes = res.body.data;
				}
			},
			// ----------------------------------------------------
			//获取责任对象类型
			async getDutyTypeList() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-mobile/main/getDicDutyObjectType',
						method: "get",
					})
				if (res.success == true) {
					this.dutyObjectTypes = res.body.data;
				}
			},
			// ----------------------------------------------------
			//获取责任对象部门树
			async getDutyObjectList() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-portal/departments/tree',
						method: "get",
					})
				if (res.success == true) {
					this.dutyObjectDep = res.body.departmentTree[0].data;
					this.dutyObjectUser = res.body.departmentTree[0].children;
				}
			},
			// ----------------------------------------------------
			//获取部门用户id
			async getCurrentDepId() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-portal/staffs?currentDepId=' + this.currentDepId,
						method: "get",
					})
				if (res.success == true) {
					this.CurrentDepPerSon = res.body.page.data;
				}
			},
			//------------------------------------------------
			//任务类型赋值
			toMissionType() {
				this.isMask = !this.isMask;
				this.isTaskType = true;
			},
			//对象类型赋值
			toObjectType() {
				this.isMask = !this.isMask;
				this.isTargetType = true;
			},
			//责任对象类型赋值
			toDutyType() {
				this.isMask = !this.isMask;
				this.isDutyType = true;
			},
			//责任对象赋值
			toDutyObject() {
				this.isMask = !this.isMask;
				this.isDutyObject = true;
			},
			//---------------------------------------------------------
			//获取任务类型的值
			getTaskType(item) {
				this.taskTypeText = item.data.dataName;
				this.taskType = item.data.dataCode;
				this.masking();
			},
			//获取对象类型的值
			getTargetType(item) {
				this.targetTypeText = item.data.dataName;
				this.targetType = item.data.dataCode;
				this.masking();
				// console.log(this.targetType)
			},
			//获取责任对象类型的值
			getDutyType(item) {
				this.dutyObjectType = item.code;
				if (this.dutyObjectType == 2) {
					uni.showLoading({
						title: '责任到分组暂不开放功能!',
						icon: 'none'
					});
					setTimeout(function() {
						uni.hideLoading();
					}, 1000)
				} else {
					this.dutyObjectTypeText = item.name;
					this.masking();
				}
			},
			//-------------------------------------------------------------------
			//获取责任对象的值(到部门)
			getDutyObjectDep() {
				if (this.dutyObjectType == '') {
					uni.showLoading({
						title: '请选择责任对象类型!',
						icon: 'none'
					});
					setTimeout(function() {
						uni.hideLoading();
					}, 2000)
				} else {
					if (this.dutyObjectTypeText == '责任到部门') {
						this.dutyObjectText = this.dutyObjectDep.nodeName;
						this.dutyObject = this.dutyObjectDep.nodeKey;
						this.masking();
					} else if (this.dutyObjectTypeText == '责任到人') {
						this.dutyObjectDepAndPerSon = this.dutyObjectDep.nodeName;
						this.currentDepId = this.dutyObjectDep.id;
						this.isCDepPerSon = true;
						this.getCurrentDepId();
					}
				}
			},
			//-----------------------------------------------------------------
			//获取责任对象的值(到部门)
			getDutyObjectUser(item) {
				if (this.dutyObjectType == '') {
					uni.showLoading({
						title: '请选择责任对象类型!',
						icon: 'none'
					});
					setTimeout(function() {
						uni.hideLoading();
					}, 2000)
				} else {
					if (this.dutyObjectTypeText == '责任到部门') {
						this.dutyObjectText = item.nodeName;
						this.dutyObject = item.nodeKey;
						this.masking();
					} else if (this.dutyObjectTypeText == '责任到人') {
						this.dutyObjectDepAndPerSon = item.nodeName;
						this.currentDepId = item.data.id;
						this.isCDepPerSon = true;
						this.getCurrentDepId();
					}
				}
			},
			//获取责任对象的值(到人)
			getCurrentDepPerSon(item) {
				this.dutyObjectText = this.dutyObjectDepAndPerSon + '/' + item.name;
				this.dutyObject = item.id
				this.masking();
			},
			//---------------------------------------------------------
			//遮罩层
			masking() {
				this.isMask = !this.isMask;
				this.isTaskType = false;
				this.isTargetType = false;
				this.isDutyType = false;
				this.isDutyObject = false;
				this.isCDepPerSon = false;
			},
			Cancels() {
				this.isCDepPerSon = false;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.container {
		.formInfo {
			.missionName {
				height: 100rpx;
				padding-left: 2%;
				margin-bottom: 3%;
				border-bottom: none;
				display: flex;
				align-items: center;
				position: relative;
				background-color: #ffffff;

				.missName {
					width: 30%;
					color: #959595;
				}

				input {
					width: 56%;
					padding-left: 1%;
					color: #000000;
				}

				text:first-child {
					color: #ff0000;
				}



				text:last-child {
					position: absolute;
					right: 0;
					margin-right: 3%;
					font-size: 28rpx;
					color: #959595;
				}
			}

			.missionType {
				height: 100rpx;
				padding-left: 2%;
				position: relative;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #dedede;
				background-color: #ffffff;

				text {
					color: #ff0000;
				}

				.missionType_o {
					width: 30%;
					color: #959595;
				}

				.missionType_t {
					width: 66%;
					position: absolute;
					right: 0;
					color: #000000;

					image {
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto 4%;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.objectType {
				height: 100rpx;
				display: flex;
				align-items: center;
				position: relative;
				border-bottom: 1px solid #dedede;
				padding-left: 4%;
				background-color: #ffffff;

				.objectType_o {
					width: 30%;
					color: #959595;
				}

				.objectType_t {
					width: 66%;
					position: absolute;
					right: 0;
					color: #000000;

					image {
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto 4%;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.dutyObjectType {
				height: 100rpx;
				display: flex;
				align-items: center;
				padding-left: 2%;
				position: relative;
				border-bottom: 1px solid #dedede;
				background-color: #ffffff;

				text {
					color: #ff0000;
				}

				.dutyObjectType_o {
					width: 30%;
					color: #959595;
				}

				.dutyObjectType_t {
					width: 66%;
					position: absolute;
					right: 0;
					color: #000000;

					image {
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto 4.3%;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.dutyObject {
				height: 100rpx;
				display: flex;
				align-items: center;
				padding-left: 2%;
				border-bottom: 1px solid #dedede;
				background-color: #ffffff;

				text {
					color: #ff0000;
				}

				.dutyObject_o {
					width: 30%;
					color: #959595;
				}

				.dutyObject_t {
					width: 66%;
					position: absolute;
					right: 0;
					color: #000000;

					image {
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto 4%;
						width: 30rpx;
						height: 30rpx;
					}
				}

				.dutyObject_No {
					padding-left: 2%;
					color: #959595;
				}
			}

			.missionAddress {
				height: 100rpx;
				display: flex;
				align-items: center;
				position: relative;
				padding-left: 2%;
				border-bottom: 1px solid #dedede;
				background-color: #ffffff;

				input {
					width: 60%;
					padding-left: 1%;
					color: #000000;
				}

				text:first-child {
					color: #ff0000;
				}

				.missAddress {
					width: 30%;
					color: #959595;
				}

				text:last-child {
					position: absolute;
					right: 0;
					margin-right: 3%;
					font-size: 28rpx;
					color: #959595;
				}
			}

			.missionTime {
				margin-bottom: 3%;
				height: 110rpx;
				border-bottom: none;
				display: flex;
				align-items: center;
				padding-left: 4%;
				background-color: #ffffff;

				.missTime {
					color: #959595;
				}

				.example-body {
					width: 68%;
					height: calc(100rpx - 10%);
					margin-left: 6%;
					position: relative;

					.dataPicker {
						position: absolute;
						top: 0;
						bottom: 0;
						margin: auto 0;
					}
				}
			}

			.missionContent {
				height: 250rpx;
				margin-bottom: 3%;
				border-bottom: none;
				padding-left: 2%;
				position: relative;
				background-color: #ffffff;

				.missionContentName {
					color: #959595;
				}

				textarea {
					width: 99%;
					height: calc(250rpx - 21%);
					color: #000000;
				}
			}

			.missionRemark {
				height: 240rpx;
				border-bottom: none;
				padding-left: 2%;
				background-color: #ffffff;

				text {
					color: #959595;
				}

				textarea {
					width: 99%;
					height: calc(240rpx - 22%);
					color: #000000;
				}
			}

			button {
				width: 94%;
				height: 90rpx;
				line-height: 90rpx;
				margin: 8% auto 3% auto;
				background-color: #10a8ff;
				color: #ffffff;
			}
			.footer_top{
				width: 100%;
				height: 0.1px;
				background-color: #EBEFF6 !important;
			}
		}

		.allMissionStyle {
			width: 100%;
			height: 800rpx;
			position: fixed;
			bottom: 0;
			z-index: 6;
			display: flex;
			flex-direction: column;
			padding: 0;
			transition: all 0 ease;
			transform: translateY(100%);

			text {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-radius: 16px 16px 0 0;
				background-color: #ffffff;
				border-bottom: 1px solid #f0f0f0;
			}

			.missionStyle {
				height: 698rpx;
				background-color: #ffffff;

				view {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-bottom: 1px solid #f0f0f0;
				}
			}
		}

		.allMissionPerson {
			width: 100%;
			height: 800rpx;
			position: fixed;
			bottom: 0;
			z-index: 6;
			display: flex;
			flex-direction: column;
			padding: 0;
			transition: all 0.5s ease;
			transform: translateY(100%);

			.personChoose {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-radius: 16px 16px 0 0;
				background-color: #ffffff;
				border-bottom: 1px solid #f0f0f0;

				.Cancels {
					position: absolute;
					left: 0;
					margin-left: 2%;
				}
			}

			.missionPerson {
				height: 698rpx;
				background-color: #ffffff;

				view {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-bottom: 1px solid #f0f0f0;
				}
			}
		}

		.mask {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 3;
			background-color: #333333;
			opacity: 0.6;
		}

	}

	.share-show {
		transition: all 0.5s ease;
		transform: translateX(0%) !important;
	}
	
	.tl-show {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}
</style>
